<template>
  <div id="repo">
    <el-container>
        <el-aside width="250px">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                  <span>资源目录</span>
                  <span>浏览</span>
              </div>
              <div class="item">
                  <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
              </div>
            </el-card>
        </el-aside>
        <el-main style="padding:0px">
          <el-tabs v-model="editableTabsValue" type="card" editable @tab-remove="removeTab">
            <el-tab-pane label="欢迎" key="0" name="0" v-bind:closable="false">
              <div style="height: 300px;margin-top: 15px;">欢饮啊啊啊</div>
            </el-tab-pane>

            <!-- 动态加载的tabs -->
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <!-- 根据条件选择加载哪种组件 -->
              <editProcess v-if="item.type == 'process'"></editProcess>
              <editJob v-else></editJob>
            </el-tab-pane>
          </el-tabs>
        </el-main>
    </el-container>
  </div>
</template> 

<script>

import editProcess from "./editProcess"
import editJob from "./editJob"

export default {
  name: "repo",
  components: {editProcess, editJob},
  data() {
    return {
      treeData: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      editableTabsValue: '2',
      editableTabs: [{
        title: '过程1',
        name: '1',
        content: 'Tab 1 content',
        type: 'process'
      }, {
        title: '作业2',
        name: '2',
        content: 'Tab 2 content',
        type: 'job'
      }],
      tabIndex: 2
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "New Tab",
        name: newTabName,
        content: "New Tab content"
      });
      this.editableTabsValue2 = newTabName;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }
  }
};
</script>

<style>
#repo {
  display: flex;
  flex: 1;
}
#repo > .el-container {
}
#repo .tool-btns {
  text-align: left;
}
</style>